<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title> Posts - </title>
  <meta name="description" content="" />
  <meta property="og:title" content="Posts" />
  <meta name="twitter:title" content="Posts" />
  <meta name="twitter:card" content="summary" />
  <meta property="og:url" content="http://example.org/post/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="吴坤安的博客" />

  <meta name="generator" content="Hugo 0.76.4" />
  <link rel="canonical" href="http://example.org/post/" />
  <link rel="alternate" href="http://example.org/index.xml" type="application/rss+xml" title="吴坤安的博客">
  <script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
  
  <link rel="stylesheet" href="http://example.org/css/main.css" />
  <link rel="stylesheet" href="http://example.org/css/search.css" />
  
  





<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />



<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>

</head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://example.org/">吴坤安的博客</a>
    </div>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-right">
        

        

        
        
      </ul>
    </div>

    <div class="avatar-container">
      <div class="avatar-img-border">
        
      </div>
    </div>

  </div>
</nav>






    
  <header class="header-section ">
    <div class="intro-header no-img">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-md-offset-0">
            <div class="page-heading">
              <h1>Posts</h1>
              <hr class="small">
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

    
  <div class="container" role="main">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        
        <div class="posts-list">
          
            <article class="post-preview">
              <a href="http://example.org/post/2017-03-20-photoswipe-gallery-sample/">
                <h2 class="post-title">Photoswipe Gallery Sample</h2>

                
                  <h3 class="post-subtitle">
                    Making a Gallery
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  <p>Beautiful Hugo adds a few custom shortcodes created by <a href="https://www.liwen.id.au/heg/">Li-Wen Yip</a> and <a href="https://github.com/GjjvdBurg/HugoPhotoSwipe">Gert-Jan van den Berg</a> for making galleries with <a href="http://photoswipe.com">PhotoSwipe</a> .</p>


<div class="gallery caption-position-bottom caption-effect-fade hover-effect-zoom hover-transition" itemscope itemtype="http://schema.org/ImageGallery">
	  
  
<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />
<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('/img/hexagon-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/hexagon-thumb.jpg" />
    </div>
    <a href="/img/hexagon.jpg" itemprop="contentUrl"></a>
  </figure>
</div>
  

<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('/img/sphere-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/sphere-thumb.jpg" alt="Sphere"/>
    </div>
      <figcaption>
          <p>Sphere</p>
      </figcaption>
    <a href="/img/sphere.jpg" itemprop="contentUrl"></a>
  </figure>
</div>
  

<div class="box" >
  <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <div class="img" style="background-image: url('/img/triangle-thumb.jpg');">
      <img itemprop="thumbnail" src="/img/triangle-thumb.jpg" alt="This is a long comment about a triangle"/>
    </div>
      <figcaption>
          <p>Triangle</p>
      </figcaption>
    <a href="/img/triangle.jpg" itemprop="contentUrl"></a>
  </figure>
</div>

</div>
                  <a href="http://example.org/post/2017-03-20-photoswipe-gallery-sample/" class="post-read-more">[Read More]</a>
                
              </div>

              
                <span class="post-meta">
                  
                    #<a href="http://example.org/tags/example/">example</a>&nbsp;
                  
                    #<a href="http://example.org/tags/photoswipe/">photoswipe</a>&nbsp;
                  
                </span>
              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/bigimg-sample/">
                <h2 class="post-title">Big Image Sample</h2>

                
                  <h3 class="post-subtitle">
                    Using Multiple Images
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  <p>The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.</p>
                  <a href="http://example.org/post/bigimg-sample/" class="post-read-more">[Read More]</a>
                
              </div>

              
                <span class="post-meta">
                  
                    #<a href="http://example.org/tags/example/">example</a>&nbsp;
                  
                    #<a href="http://example.org/tags/bigimg/">bigimg</a>&nbsp;
                  
                </span>
              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2017-03-05-math-sample/">
                <h2 class="post-title">Math Sample</h2>

                
                  <h3 class="post-subtitle">
                    Using KaTeX
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  <p>KaTeX can be used to generate complex math formulas server-side.</p>
<p>$$
\phi = \frac{(1+\sqrt{5})}{2} = 1.6180339887\cdots
$$</p>
<p>Additional details can be found on <a href="https://github.com/Khan/KaTeX">GitHub</a> or on the <a href="http://tiddlywiki.com/plugins/tiddlywiki/katex/">Wiki</a>.</p>
                  <a href="http://example.org/post/2017-03-05-math-sample/" class="post-read-more">[Read More]</a>
                
              </div>

              
                <span class="post-meta">
                  
                    #<a href="http://example.org/tags/example/">example</a>&nbsp;
                  
                    #<a href="http://example.org/tags/math/">math</a>&nbsp;
                  
                </span>
              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2016-03-08-code-sample/">
                <h2 class="post-title">Code Sample</h2>

                
                  <h3 class="post-subtitle">
                    Using Hugo or Pygments
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  <p>The following are two code samples using syntax highlighting.</p>
                  <a href="http://example.org/post/2016-03-08-code-sample/" class="post-read-more">[Read More]</a>
                
              </div>

              
                <span class="post-meta">
                  
                    #<a href="http://example.org/tags/example/">example</a>&nbsp;
                  
                    #<a href="http://example.org/tags/code/">code</a>&nbsp;
                  
                </span>
              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2015-02-26-flake-it-till-you-make-it/">
                <h2 class="post-title">Flake it till you make it</h2>

                
                  <h3 class="post-subtitle">
                    Excerpt from Soulshaping by Jeff Brown
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?
                  <a href="http://example.org/post/2015-02-26-flake-it-till-you-make-it/" class="post-read-more">[Read More]</a>
                
              </div>

              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2015-02-20-test-markdown/">
                <h2 class="post-title">Test markdown</h2>

                
                  <h3 class="post-subtitle">
                    Each post also has a subtitle
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  You can write regular markdown here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to take 5 minutes to learn how to write in markdown - it&rsquo;ll teach you how to transform regular text into bold/italics/headings/tables/etc.
Here is some bold text
Here is a secondary heading Here&rsquo;s a useless table:
   Number Next number Previous number     Five Six Four   Ten Eleven Nine   Seven Eight Six   Two Three One    How about a yummy crepe?
                  <a href="http://example.org/post/2015-02-20-test-markdown/" class="post-read-more">[Read More]</a>
                
              </div>

              
                <span class="post-meta">
                  
                    #<a href="http://example.org/tags/example/">example</a>&nbsp;
                  
                    #<a href="http://example.org/tags/markdown/">markdown</a>&nbsp;
                  
                </span>
              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2015-02-13-hamlet-monologue/">
                <h2 class="post-title">To be</h2>

                
                  <h3 class="post-subtitle">
                    ... or not to be?
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  To be, or not to be&ndash;that is the question: Whether &lsquo;tis nobler in the mind to suffer The slings and arrows of outrageous fortune Or to take arms against a sea of troubles And by opposing end them. To die, to sleep&ndash; No more&ndash;and by a sleep to say we end The heartache, and the thousand natural shocks That flesh is heir to. &lsquo;Tis a consummation Devoutly to be wished. To die, to sleep&ndash; To sleep&ndash;perchance to dream: ay, there&rsquo;s the rub, For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause.
                  <a href="http://example.org/post/2015-02-13-hamlet-monologue/" class="post-read-more">[Read More]</a>
                
              </div>

              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2015-01-27-dear-diary/">
                <h2 class="post-title">Dear diary</h2>

                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  What is it with that Mary girl? Dragging me to school every day. As if I had a choice. What you don&rsquo;t hear in those nursery rhymes is that she starves me if I don&rsquo;t go to school with her; it&rsquo;s the only way I can stay alive! I&rsquo;m thinking about being adopted by Little Bo Peep, sure I may get lost, but anything is better than being with Mary and those little brats at school (shudder, shudder).
                  <a href="http://example.org/post/2015-01-27-dear-diary/" class="post-read-more">[Read More]</a>
                
              </div>

              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/2015-01-19-soccer/">
                <h2 class="post-title">Soccer</h2>

                
                  <h3 class="post-subtitle">
                    Best sport ever!
                  </h3>
                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  From Wikipedia:
Association football, more commonly known as football or soccer,[2] is a sport played between two teams of eleven players with a spherical ball. It is played by 250 million players in over 200 countries, making it the world&rsquo;s most popular sport.[3][4][5][6] The game is played on a rectangular field with a goal at each end. The object of the game is to score by getting the ball into the opposing goal.
                  <a href="http://example.org/post/2015-01-19-soccer/" class="post-read-more">[Read More]</a>
                
              </div>

              

            </article>
          
            <article class="post-preview">
              <a href="http://example.org/post/pirates/">
                <h2 class="post-title">Pirates arrrr</h2>

                
              </a>

              <p class="post-meta">
                
              </p>
              <div class="post-entry">
                
                  Piracy is typically an act of robbery or criminal violence at sea. The term can include acts committed on land, in the air, or in other major bodies of water or on a shore. It does not normally include crimes committed against persons traveling on the same vessel as the perpetrator (e.g. one passenger stealing from others on the same vessel). The term has been used throughout history to refer to raids across land borders by non-state agents.
                  <a href="http://example.org/post/pirates/" class="post-read-more">[Read More]</a>
                
              </div>

              

            </article>
          
        </div>
        
          <ul class="pager main-pager">
            
            
              <li class="next">
                <a href="/post/page/2">Older Posts &rarr;</a>
              </li>
            
          </ul>
        
      </div>
    <div align="center" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        
<ul class="pagination">
  <li class="page-item">
    <a href="/post/" class="page-link" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </li>
  <li class="page-item disabled">
    <a  class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="/post/">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="/post/page/2/">2</a>
  </li>
  <li class="page-item">
    <a href="/post/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
  </li>
  <li class="page-item">
    <a href="/post/page/2/" class="page-link" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </li>
</ul>


        
        
        
        
        
        
        
        
        
        
        
      </div>
    </div>
  </div>

    <footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <ul class="list-inline text-center footer-links">
          
          
        </ul>
        <p class="credits copyright text-muted">
        &copy;2017-2018
          
          
          
            &nbsp;&bull;&nbsp;
            <a href="http://example.org/">吴坤安的博客</a>
          
        </p>

        
        <p class="credits theme-by text-muted">
          <a href="http://gohugo.io">Hugo v0.76.4</a> powered &nbsp;&bull;&nbsp; Theme by <a href="http://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a> adapted to <a href="https://github.com/rootsongjc/beautifulhugo">Beautiful Hugo</a>
          
        </p>
      </div>
    </div>
  </div>
</footer>


<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/bootstrap.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/photoswipe-ui-default.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/photoswipe.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/auto-render.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/main.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/prism.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/katex.min.js"></script>
<script> renderMathInElement(document.body); </script>







  </body>
</html>

